<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>退款订单导出列表</span>
      <div>
        <el-button @click="refresh" icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="tableBox">
        <el-select
          v-model="exportType"
          placeholder="请选择查询类型"
          @change="typeChange"
          style="margin-bottom: 20px"
          v-if="userinfo.rolesId == 1"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.type"
          >
          </el-option>
        </el-select>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="导出时间"
          ></el-table-column>
          <el-table-column prop="userName" align="center" label="用户名">
            <template slot-scope="scope">
              <span v-if="scope.row.rolesId == '1'"
                >{{ scope.row.userName }}(超级管理员)</span
              >
              <span v-else-if="scope.row.rolesId == '2'"
                >{{ scope.row.userName }}(一级服务商)</span
              >
              <span v-else-if="scope.row.rolesId == '3'"
                >{{ scope.row.userName }}(二级服务商)</span
              >
              <span v-else-if="scope.row.rolesId == '4'"
                >{{ scope.row.userName }}(业务经理)</span
              >
              <span v-else-if="scope.row.rolesId == '5'"
                >{{ scope.row.userName }}(商户)</span
              >
              <span v-else-if="scope.row.rolesId == '6'"
                >{{ scope.row.userName }}(门店)</span
              >
              <span v-else-if="scope.row.rolesId == '7'"
                >{{ scope.row.userName }}(终端)</span
              >
              <span v-else-if="scope.row.rolesId == '8'"
                >{{ scope.row.userName }}(运营)</span
              >
              <span v-else-if="scope.row.rolesId == '9'"
                >{{ scope.row.userName }}(财务)</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            align="center"
            label="起始时间"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            align="center"
            label="结束时间"
          ></el-table-column>
          <el-table-column prop="exportStatus" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.exportStatus == '1'">进行中</span>
              <span v-else-if="scope.row.exportStatus == '2'">完成</span>
              <span v-else-if="scope.row.exportStatus == '3'"
                >失败({{ scope.row.exportMsg }})</span
              >
              <span v-else-if="scope.row.exportStatus == '99'">删除</span>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                v-if="scope.row.exportStatus == 2"
                @click="download(scope.row.exportUrl)"
                >下载</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="del(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="cur_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          ></el-pagination>
        </div>
        <div class="notice-tip">
          * 仅提供72小时内导出记录查询，超过72小时的导出文件将被系统自动删除
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { exportRecordlist, exportRecorddelete } from "@/api/api";
export default {
  name: "item-one",
  data: function () {
    return {
      userinfo: "",
      selectVisible: false,
      selectOptions: [
        {
          label: "退款列表",
          type: "4",
        },
      ],
      exportType: null,
      loading: false,
      isDisable: false,
      ctime: [],
      cur_page: 1,
      cur_size: 10,
      total1: 0,
      multipleSelection: [],
      restaurants: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
    };
  },
  filters: {
    formatStata(status) {
      var time_str = status;
      var status = time_str.substr(0, 10);
      return status;
    },
  },
  watch: {
    $route: {
      handler: function (val, oldval) {
        this.routeType = val.query.type;
        console.log(val);
        if (val.query.zhy) {
          this.exportType = 7;
        } else {
          this.exportType = val.query.exportType;
        }
      },
      immediate: true,
    },
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (this.userinfo.rolesId == 1) {
      this.selectVisible = true;
    } else {
      this.selectVisible = false;
    }
    this.exportRecordlist();
  },
  activated() {
    this.exportRecordlist();
  },
  methods: {
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    // 查询类型变动
    typeChange(val) {
      console.log(val);
      this.exportRecordlist();
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.exportRecordlist();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.exportRecordlist();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 交易记录导出列表
    exportRecordlist() {
      this.loading = true;
      this.isDisable = true;
      exportRecordlist({
        page: this.cur_page,
        size: this.cur_size,
        exportType: this.exportType,
      }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          console.log(res.data);
          if (res.code == 200) {
            this.isDisable = false;
            this.loading = false;
            if (res.data !== []) {
              console.log(res);
              this.merchantarr = res.data.rows;
              this.total1 = res.data.total;
              this.pageCount = res.data.currPage;
            }
          } else if (res.code == 500) {
            this.isDisable = false;
            this.loading = false;
            this.$message.error(res.message);
          }
        }
      });
    },
    download(url) {
      let elink = document.createElement("a");
      elink.download = "订单列表.xls";
      elink.href = url;
      elink.click();
    },
    del(id) {
      this.$confirm("是否确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          exportRecorddelete({}, id).then((res) => {
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else if (res.code == 200) {
              this.$message({
                message: "已删除",
                type: "success",
              });
              this.exportRecordlist();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    refresh() {
      this.exportRecordlist();
    },
  },
};
</script>
<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 40%;
  padding: 0 35px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.inline-input {
  width: 350px;
}
.width60 {
  width: 50%;
}
.notice-tip {
  color: red;
  font-size: 8px;
  text-align: center;
}
</style>